<template>
    <BaseCharts
        ref="chart"
        :options="options"
    />
</template>

<script>
import JSON from "../assets/yunnansheng.json";
import BaseCharts from "@/components/charts/BaseCharts";
export default {
	components: {
		BaseCharts,
	},
	data() {
		return {
			options: {},
		};
	},
	mounted() {
		this.$refs.chart.echarts.registerMap("云南省", JSON);
		this.options = {
			visualMap: {
                type: "piecewise",
                textStyle: {
                    color: "#fff",
                },
                pieces: [{ min: 300, label: "监测点", color: "#e3bf4c" }],
                color: ["#e3bf4c"],
            },
            geo: {
                // 地图配置
                map: "云南省",
                aspectScale: 1,
                zoom: 1.24,
                left: "center",
                top: "middle",
                label: {
                    normal: {
                        show: false,
                        color: "#ffffff",
                        fontWeight: "bold",
                        fontSize: 18,
                        position: "insideTopLeft",
                        distance: 0,
                        rotate: -90,
                    },
                    emphasis: {
                        position: "insideTopLeft",
                        distance: 0,
                        color: "#ffffff",
                    },
                },
                itemStyle: {
                    normal: {
                        areaColor: "#01215c",
                        borderWidth: 3.5, //设置外层边框
                        borderColor: "#9ffcff",
                        shadowColor: "rgba(0,54,255, 0.85)",
                        shadowBlur: 80,
                    },
                    emphasis: {
                        areaColor: "rgb(10,50,100)",
                        shadowOffsetX: 20,
                        shadowOffsetY: 20,
                        shadowBlur: 20,
                    },
                },
            },

            series: [
                // 散点配置
                {
                    type: "effectScatter",
                    coordinateSystem: "geo",
                    symbolSize: 22,
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                        },
                    },
                    itemStyle: {
                        emphasis: {
                            borderColor: "#fff",
                            borderWidth: 1,
                        },
                    },
                },
            ],
		};
	},
};
</script>
